<!DOCTYPE html>
<html xmlns: xmlns:>

<head>
    <meta charset="utf-8">

    <script src="http://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="css/home.css" charset="UTF-8"/>
</head>

<body>
<div id="app">
    <div id="book">

        <div class="container-fluid">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="top">
                        <div style="position:absolute;z-index:2;left:20px;top:0px;">
                            <img src="img/02-1图书管理-管理员_02.png" width="100" height="100">
                        </div>
                        <div style="position:absolute;z-index:2;right:20px;top:15px;">
                            <img src="img/图标02_03.png">
                        </div>
                        <div style="position:absolute;z-index:2;right:200px;top:20px;">
                            <img src="img/220_03.png">
                        </div>
                        <div style="position:absolute;z-index:2;right:70px;top:22px;">
                            <img src="img/退出%20(5).png">
                        </div>
                    </div>
                    <div class="row clearfix">
                        <div class="col-md-12 column">

                            <div class="col-md-1 column" style="border-right:1px solid rgba(0,0,0,0.47);">
                                <div style="margin-top: 10px;">
                                    <div style="float:left;">
                                        <p style="color: rgba(0,0,0,0.47);">菜单项MENU</p>
                                    </div>
                                    <div style="float:right;">&gt;&gt;</div>
                                </div>

                            </div>
                            <div class="col-md-11 column">
                                <div style="float:left;margin-top: 10px">
                                    <p id="selectItem" style="color: rgba(0,0,0,0.47);">图书管理</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-1 column">

                    <ul class="nav nav-pills nav-stacked">
                        <li><a href="http://localhost:8080/adminPage.html">图书管理</a></li>
                        <li class="active"><a>借阅历史</a></li>
                    </ul>
                </div>
                <div class="col-md-11 column">
                    <form class="form-inline" style="margin-left: 10px;">
                        查询图书名称：<input id="bookname" class="form-control" type="text" placeholder="请输入图书名称查询" v-model="search">
                        <!--                        <button class="btn btn-primary" type="button" onclick="searchBookHistory()" >查询</button>-->

                    </form>
                    <table class="table">
                        <thead>
                        <tr>
                            <th>
                                图书名称
                            </th>
                            <th>
                                出版社
                            </th>
                            <th>
                                作者
                            </th>
                            <th>
                                借阅人学号
                            </th>
                            <th>
                                借阅人姓名
                            </th>
                            <th>
                                借阅时间
                            </th>
                            <th>
                                归还时间
                            </th>
                        </tr>
                        </thead>

                        <!--                        <tbody v-for="(message,index) in messages.data" :key="index" v-model="messages[index]">-->
                        <tbody v-for="(message,index) in items" :key="message.id">
                        <div  >
                            <tr>
                                <td>
                                    {{message.bookname}}
                                </td>
                                <td>
                                    {{message.publish}}
                                </td>
                                <td>
                                    {{message.author}}
                                </td>
                                <td>
                                    {{message.schoolid}}
                                </td>
                                <td>{{message.username}}</td>
                                <td>{{message.borrowTime}}</td>
                                <td>{{message.backTime}}</td>
                            </tr>
                        </div>
                        </tbody>

                    </table>
                    <div class="pageDiv" style="margin: 0 auto;">
                        <nav>
                            <ul class="pagination">
                                <li :class="{ disabled: messages.isFirstPage }">
                                    <a  href="#nowhere" @click="jump('first')">«</a>
                                </li>
                                <li :class="{ disabled: !messages.hasPreviousPage }">
                                    <a  href="#nowhere" @click="jump('pre')">‹</a>
                                </li>

                                <li  v-for="i in messages.pages">
                                    <a href="#nowhere" @click="jumpByNumber(i)" >
                                        {{i}}
                                    </a>
                                </li>

                                <li :class="{ disabled: !messages.hasNextPage }">
                                    <a  href="#nowhere" @click="jump('next')">›</a>
                                </li>
                                <li :class="{ disabled: messages.isLastPage }">
                                    <a  href="#nowhere" @click="jump('last')"> »</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <div>

        </div>

    </div>
</div>




<script src="http://code.jquery.com/jquery-3.4.1.js " integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin=" anonymous "></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js "></script>
<script src="http://how2j.cn/study/vue.min.js"></script>
<script src="http://how2j.cn/study/axios.min.js"></script>

<script src="http://how2j.cn/study/fetch.min.js"></script>
<script>
    // function searchBookHistory() {
    // var bookname = $('#bookaname').val()
    // $.ajax({
    //    type:"post",
    //     async:true,
    //    data:{
    //        "bookname":bookname,
    //    },
    //    url:"http://localhost:8080/searchBorrowHistory",
    //    dataType:"json",
    //     success :function(result){
    //        window.location.reload();
    //     },
    //     error(result){
    //
    //     }
    //
    // });


    // }

    function jump(page,vue){
        if('first'== page && !vue.messages.isFirstPage)
            vue.list(vue.messages.firstPage);

        else if('pre'== page &&	vue.messages.hasPreviousPage )
            vue.list(vue.messages.prePage);

        else if('next'== page && vue.messages.hasNextPage)
            vue.list(vue.messages.nextPage);

        else if('last'== page && !vue.messages.isLastPage)
            vue.list(vue.messages.lastPage);
    }

    function jumpByNumber(start,vue){
        if(start!=vue.messages.pageNum)
            vue.list(start);
    }


    var vue = new Vue({
        el: '#app',
        data: {
            messages: [],
            search:''
        },
        methods: {
            list:function(start){
                self = this;
                start = start-1;
                url = "http://localhost:8080/getBorrowHistory?start="+start;
                fetch(url).then(function (response) {
                    response.json().then(function (jsonObject) {
                        self.messages = jsonObject.data

                    })
                }).catch(function (err) {
                    console.log("Fetch错误:" + err);
                })
            },
            jump: function(page){
                jump(page,vue); //定义在adminHeader.html 中
            },
            jumpByNumber: function(start){
                jumpByNumber(start,vue);
            }
        },
        mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
            this.list(1);
        },
        computed: {
            //过滤方法
            items: function() {
                var _search = this.search;
                if (_search) {
                    //不区分大小写处理
                    var reg = new RegExp(_search, 'ig')
                    //es6 filter过滤匹配，有则返回当前，无则返回所有
                    return this.messages.list.filter(function(e) {
                        //匹配所有字段
                        // return Object.keys(e).some(function(key) {
                        //     return e[key].match(reg);
                        // })
                        //匹配某个字段
                        return e.bookname.match(reg);
                    })
                };
                return this.messages.list;
            }
        }

    })
</script>
</body>

</html>